<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/images/logo.png" alt="">
    </div>
    <ul class="nav">
      <li v-for="item in navs" :key="item.link" class="item">
        {{item.name}}
        <template v-if="item.children">
          <ul class="subnav">
            <li v-for="item1 in item.children" :key="item1.link" class="subitem">{{ item1.name }}</li>
          </ul>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HeaderComponent',
  data() {
    return {
      navs: []
    }
  },
  mounted() {
    this.initNav()
  },
  methods: {
    initNav() {
      const { routes } = this.$router.options
      routes.forEach(item => {
        if (item.children) {
          let child = []
          item.children.forEach(item1 => {
            child.push({
              link: item1.path,
              name: item1.name
            })
          })
          this.navs.push({
            link: item.path,
            name: item.name,
            children: child
          })
        } else {
          this.navs.push({
            link: item.path,
            name: item.name
          })
        }
      });
      console.log(this.navs)
    }
  }
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1200px) {
  .header{
    width: 1200px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1200px) {
  .header{
    width: 100%;
  }
}
.header{
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  .nav {
    display: flex;
    .item {
      margin: 20px;
      margin-bottom: 0;
      cursor: pointer;
      position: relative;
      .subnav{
        display: none;
        position: absolute;
        background-color: #ffffff;
        padding: 10px;
        width: 120px;
        border-radius: 10px;
        .subitem {
          padding: 6px 16px;
          &:hover {
            color: #306CFF;
            background-color: #F1F1F1;
          }
        }
      }
      &:hover {
        color: #306CFF;
        .subnav {
          display: block;
          color: #2c3e50;
        }
      }
    }
  }
}
</style>